<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="resultDetailList" @row-click="clickOne">
    <el-table-column label="左文件页数" align="center" prop="leftNum" />
    <el-table-column label="右文件页数" align="center" prop="rightNum" />
    <el-table-column label="重合字数" align="center" prop="preNum" />
    <el-table-column label="高亮内容" align="center" prop="lightWord" />
    <el-table-column label="重复内容" align="center" prop="preWord" />
    <el-table-column label="备注" align="center" prop="remark" />
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <br>
    <br>
    <div class="box">
      <div title="左" id="left">
        <iframe name="leftIframe" width="100%" height="1100" :src="`/web/viewer.html?file=${src}`" frameborder="0" id="myIframe"></iframe>
      </div>
      <div title="右" id="right">
        <iframe name="rightIframe" width="100%" height="1100" :src="`/web/viewer.html?file=${src1}`" frameborder="0" id="myIframe1"></iframe>
      </div>
    </div>
  </div>
</template>
  
<script>
import {getResult} from "@/api/system/result";

export default {
  data() {
    return {
      selectText: "",//搜索框中的文本
      src: "",
      src1: "",
      resultId: "",
      resultList: [],
      // 比对结果详情表格数据
      resultDetailList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id:undefined,
        resultId: undefined,
        leftName: undefined,
        leftNum: undefined,
        rightName: undefined,
        rightNum: undefined,
        preNum: undefined,
        lightWord: undefined,
        preWord: undefined,
      },
    };
  },
  created() {
    // 页面加载，拿到路由中的url复制给data中的src
    this.src = this.$route.query.url;
    this.src1 = this.$route.query.url1;
    this.queryParams.resultId = this.$route.query.resultId;
    this.getList();
  },
  mounted() {
    //这是滑选事件
    this.getSelectText();
    // 搜索时 接收数据
    this.getMessage();
  },
  methods: {
    clickOne(row){
      this.selectText = row.lightWord;
      this.sendMessage();
    },
    /** 查询对象存储配置列表 */
    getList() {
      this.loading = true;
      getResult(this.queryParams).then(response=>{
        this.resultDetailList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 滑选事件注册： 获取鼠标选中的文本
    getSelectText() {
      let _this = this;
      let iframe = document.getElementById('myIframe');
      let x = '';
      let y = '';
      let _x = '';
      let _y = '';
      // iframe 加载完成后执行并将双击事件过滤掉，因为双击事件可能也触发滑选，所以为了不误操作，将其剔除
      iframe.onload = function () {
        // 鼠标点击监听
        iframe.contentDocument.addEventListener('mousedown', function (e) {
          x = e.pageX;
          y = e.pageY;
        }, true);
        // 鼠标抬起监听
        iframe.contentDocument.addEventListener('mouseup', function (e) {
          _x = e.pageX;
          _y = e.pageY;
          if (x == _x && y == _y) return; //判断点击和抬起的位置，如果相同，则视为没有滑选，不支持双击选中
          var choose = iframe.contentWindow.getSelection().toString();
          _this.selectText = choose;
        }, true);       
      };
    },
    // 发送数据(搜索文字)
    sendMessage() {
      //获取iframe
      let iframe = document.getElementById('myIframe').contentWindow;
      let iframe1 = document.getElementById('myIframe1').contentWindow;
      //将滑选数据传入到iframe中
      iframe.postMessage(this.selectText, '*');
      iframe1.postMessage(this.selectText, '*');
    },
    // 接受数据
    getMessage() {
      var cWindow = document.getElementById('myIframe').contentWindow;
      var cWindow1 = document.getElementById('myIframe1').contentWindow;

      // iframe监听是否有数据传入，将传入的数据作为参数传递给pdf.js的find接口
      cWindow.addEventListener('message', function (e) {
        //这里打印一下，看是否拿到了传入的数据
        console.log(e.data);
        // 输入查询数据
        cWindow.PDFViewerApplication.findBar.findField.value = e.data;
        // 要求查询结果全体高亮
        cWindow.PDFViewerApplication.findBar.highlightAll.checked = true;
        // 上面两部已经OK，触发highlightallchange方法。OK。
        cWindow.PDFViewerApplication.findBar.dispatchEvent('highlightallchange');
      }, false);
      // iframe监听是否有数据传入，将传入的数据作为参数传递给pdf.js的find接口
      cWindow1.addEventListener('message', function (e) {
        //这里打印一下，看是否拿到了传入的数据
        console.log(e.data);
        // 输入查询数据
        cWindow1.PDFViewerApplication.findBar.findField.value = e.data;
        // 要求查询结果全体高亮
        cWindow1.PDFViewerApplication.findBar.highlightAll.checked = true;
        // 上面两部已经OK，触发highlightallchange方法。OK。
        cWindow1.PDFViewerApplication.findBar.dispatchEvent('highlightallchange');
      }, false);
    },
  }
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 22px;
  display: flex;
  flex-direction: row;
}
.box > div {
  height: 22px;
  flex: 1;
}
</style>